<template>
  <!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. -->
  <div
    id="myDiagramDiv"
    style="width: 100%; height: 600px; background-color: #dae4e4"
  ></div>
  <a-switch v-model:checked="changes">切换</a-switch>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
const changes = ref(false);
let myDiagram = null;

var $ = go.GraphObject.make;
const consoleHeihei = (e, obj) => {
  var node = obj.part.adornedPart; // the Node with the context menu
  var buttontext = obj.elt(1); // the TextBlock
  console.log(buttontext.text, node.data.text, "consoleHeihei");
};
const init = () => {
  myDiagram = $(go.Diagram, "myDiagramDiv", {
    initialContentAlignment: go.Spot.Center, // center Diagram contents
    "undoManager.isEnabled": false, // enable Ctrl-Z to undo and Ctrl-Y to redo
    layout: $(go.TreeLayout, { angle: 90, layerSpacing: 35 }), // 让比较器按数字和字母排序
  });
  myDiagram.addDiagramListener("ObjectSingleClicked", (e) => {
    const part = e.subject.part;
    if (!(part instanceof go.Link)) console.log("Clicked on " + part.data.text);
  });
  const W_geometry = go.Geometry.parse(
    "M853.489728 170.331193l-682.888383 0 0 85.338535 682.888383 0L853.489728 170.331193zM896.118575 597.140526l0-85.338535-42.628847-213.440994-682.888383 0-42.691269 213.440994 0 85.338535 42.691269 0 0 256.069841 426.809332 0 0-256.069841 170.67707 0 0 256.069841 85.40198 0 0-256.069841L896.118575 597.140526zM512.018931 767.871831l-256.078027 0 0-170.731305 256.078027 0L512.018931 767.871831z",
    false
  );

  //   myDiagram.add(
  //     new go.Part(go.Panel.Spot, { scale: 2 }).add(
  //       // the background border
  //       new go.Shape("Circle", { width: 65, strokeWidth: 0, fill: "red" }),
  //       // the same clipping panel as the second example, above
  //       new go.Panel("Spot", { isClipping: true }).add(
  //         new go.Shape("Circle", { width: 55, strokeWidth: 0 }),
  //         new go.Picture({ source: "/img/test/test.jpg", width: 55, height: 55 })
  //       )
  //     )
  //   );
  myDiagram.nodeTemplate = new go.Node("Horizontal", {
    // define a context menu for each node
    contextMenu: go.GraphObject.build("ContextMenu") // that has one button
      .add(
        go.GraphObject.build("ContextMenuButton", {
          click: consoleHeihei,
          "ButtonBorder.fill": "white",
          _buttonFillOver: "skyblue",
        }).add(new go.TextBlock("consoleHeihei"))
        // more ContextMenuButtons would go here
      ),
  }).add(
    new go.Picture({
      source: "/img/pic_logo.svg",
      //  设置来控制所绘制图像的大小和长宽比
      //  https://gojs.net/latest/api/symbols/Picture.html#imageStretch
      imageStretch: go.ImageStretch.UniformToFill,
      width: 60,
      height: 80,
      column: 0,
      margin: 2,
      background: "pink",
    })
      .bind("source")
      .bind("imageStretch"),
    new go.Shape({ strokeWidth: 0, width: 0, height: 20 })
      .bind("geometry")
      .bind("width", "geometryWidth")
      .bind("strokeWidth", "geometryStrokeWidth"),
    new go.TextBlock({
      margin: 8,
      color: "white",
      editable: true,
      isMultiline: false,
    })
      .bind("text")
      .bind("font")
  );
  myDiagram.linkTemplate = $(
    go.Link,
    {
      routing: go.Link.Orthogonal,
      corner: 5,
    },
    $(
      go.Shape,
      { strokeWidth: 3, stroke: "#555" },
      new go.Binding("stroke", "highlight", (v) =>
        v && changes.value ? null : "red"
      )
    ),
    $(
      go.Shape,
      { toArrow: "OpenTriangle", fill: null },
      new go.Binding("stroke", "highlight", (v) =>
        v && changes.value ? null : "red"
      )
    )
  );

  var myModel = $(go.TreeModel);
  myModel.nodeDataArray = [
    {
      key: "1",
      text: "Alpha",
      color: "lightblue",
      source: "/img/test/test.jpg",
      imageStretch: go.ImageStretch.Uniform,
    },
    {
      key: "2",
      text: "Beta",
      parent: "1",
      color: "pink",
      source: "/img/test/test.jpg",
      imageStretch: go.ImageStretch.UniformToFill,
    },
    {
      key: "3",
      text: "Beta",
      parent: "1",
      color: "pink",
      source: "/img/test/test.jpg",
      imageStretch: go.ImageStretch.None,
    },
    {
      key: "4",
      text: "Gamma",
      parent: "1",
      color: "yellow",
      highlight: false,
      imageStretch: go.ImageStretch.Fill,
    },
    {
      key: "5",
      text: "图标\ue71c",
      parent: "2",
      color: "yellow",
      font: "14pt iconfont",
      imageStretch: go.ImageStretch.None,
    },
    {
      key: "6",
      text: "svg格式绘制",
      geometry: W_geometry,
      geometryWidth: 20,
      geometryStrokeWidth: 2,
      parent: "4",
      color: "yellow",
    },
    { key: "7", text: "6", parent: "4", color: "yellow" },
    { key: "8", text: "7", parent: "3", color: "yellow" },
  ];
  myModel.linkDataArray = [
    { from: "1", to: "1" },
    { from: "1", to: "2" },
    { from: "2", to: "3" },
  ];
  myDiagram.model = myModel;
  loop(myDiagram);
};
function flash(diagram) {
  // all model changes should happen in a transaction
  diagram.model.commit((m) => {
    var data = m.nodeDataArray[2]; // get the first node data
    m.set(data, "highlight", !data.highlight);
  }, "flash");
}
function loop(diagram) {
  setTimeout(() => {
    flash(diagram);
    loop(diagram);
  }, 500);
}

onMounted(() => {
  // Explicitly load a font.  Only do this once, not each time you load a model.
  const asdihasdk = new FontFace("iconfont", "url(/font/iconfont.woff)");
  document.fonts.add(asdihasdk);
  // Wait for the Font Awesome font to load before actually loading the diagram.
  asdihasdk.load().then(() => init());
});
watch(
  () => changes.value,
  () => {
    // all model changes should happen in a transaction
    myDiagram?.model.commit((m) => {
      var data = m.nodeDataArray[2]; // get the first link data
      if (changes.value) m.setParentKeyForNodeData(data, "4");
      else m.setParentKeyForNodeData(data, "1");
    }, "reconnect link");
  }
);
</script>
<style lang="scss" scoped></style>
